<template>
	<!-- 周期列表 -->
	<view class="cs-file-x">
		<view class="cs-file" v-if="periodList.length > 0">
			<view class="cs-file-swiper" v-for="(item,index) in periodList" :key='index'>
				<!-- TODO: 接口暂时没有修改-->
				<uni-swipe-action :options="options" @click='clickSwiper(index, $event)'>
					<view class='cont cs-file-swiper-item'>
						<view class="">
							<view style="font-size: 32upx;color: #333333;">{{item.yearName}}</view>
							<view style="font-size: 24upx;color: #C2C2C2;">{{item.yearStart}} - {{item.yearEnd}}</view>
						</view>
						<view class="cr">共{{item.weekNum}}周</view>
					</view>
				</uni-swipe-action>
			</view>
		</view>
		
		<view v-else class="cs-tip">
			<text>请前往创建年度</text>
		</view>
		
		<v-prop v-if='isProp' msg='确定删除此年度？' @changeProp='changeProp'></v-prop>
	</view>
</template>

<script>
	import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action"
	import prop from '@/components/del-prop/del-prop'
	export default {
		components: {
			uniSwipeAction,
			vProp: prop
		},
		onNavigationBarButtonTap() {
			// 创建周期
			uni.navigateTo({
				url: './period-create'
			})
		},
		data() {
			return {
				periodList: [], // 年度列表
				options: [{
					text: '编辑',
					style: {backgroundColor: '#FF9900'}
				}, {
					text: '删除',
					style: {backgroundColor: '#FF7171'}
				}],
				
				isProp: false ,// 是否显示删除弹窗
				
				stuId: uni.getStorageSync('currentChild').student_id,
				
				isRefresh: false ,// 是否可以刷新数据
				
				yearKey: null, // 年度key
				year_index: 0, // 年度索引
			}
		},
		onShow() {
			// 实时更新周期列表
			this.getData()
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取周期列表
			getData() {
				this.$capi.apiPost('/stuYear/selYearByChoose', {
					stuId: this.stuId,
					reqMethod: 2
				}).then(res => {
					this.periodList = res.data.data
					this.isRefresh =  true
				})
			},
			
			// 选中周期
			selectPreid(index) {
				// // 选中后重新后退到创建列表,并将选中的数据放到缓存中
				// uni.setStorageSync('periodList', this.periodList[index])
				// uni.navigateBack()
			},
			
			// 滑动点击 删除 / 编辑事件
			clickSwiper(index,event) {
				// 0 编辑 1删除
				if (event.index === 0) {
					uni.showToast({
						title: '暂未开通',
						icon: 'none'
					})
					// 将选中的对应周期ID也带过去
					// uni.navigateTo({
					// 	url: `./period-edit?weekid=${this.periodList[index].weekid}`
					// })
				} else {
					this.year_index = index
					this.yearKey = this.periodList[index].yearKey // 获取删除对应的年度Key
					this.isProp = true // 挂起删除弹窗
				}
			},
			
			// 是否确认删除
			changeProp(isConfirm) {
				// 表示确定
				if (isConfirm) {
					this.$capi.apiPost('/stuYear/delStuYear', {
						reqMethod: 2,
						yearKey: this.yearKey
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '删除成功',
							})
							this.periodList.splice(this.year_index, 1) // 删除对应的年度索引
						}
					})
				}
				this.isProp = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	.cs-file-x {
		border: 2upx solid transparent;
	}
	.cs-file{
		margin: 30upx;
	}
	.cs-file-swiper{
		margin-bottom: 20upx;
	}
	.cs-file-swiper:last-child {
		margin-bottom: 100upx;
	}
	.cs-file-swiper-item{
		display: flex;
		padding: 14upx 30upx;
		justify-content: space-between;
		align-items: center;
		border-radius: 16upx;
		background: #FFFFFF;
		.cr {
			white-space: nowrap;
			font-size: 28upx;
			color: #999999;
		}
	}
	
	.cs-tip{
		padding-top: 300upx;
		text-align: center;
		font-size: 40upx;
		color: #C2C2C2;
	}
</style>
